<template>
  <div class="device mbm">
    <a-form layout="inline" :form="formSettings" @submit.prevent="submitSettings">
      <h4 class="step_title mbm">设备配置：</h4>
      <div class="label">
        串口设备号
        <a-button type="link" icon="reload" @click="handleListTTY">{{reloadBtn}}</a-button>
      </div>
      <div class="wrapper">
        <a-form-item>
          <a-auto-complete
            class="talk_input mrm"
            :dataSource="dataSource.call"
            style="width: 300px"
            @blur="handleCheckForm"            
            placeholder="请选择或输入您的串口设备号"
            v-decorator="[
          'tty_call',
          { rules: [{ required: true, message: '通讯需要，这里不能为空哦！' }] },
          ]"
          >
            <a-input>
              <a-popover slot="suffix" title="帮助提示">
                <template slot="content">
                  此处填写您的扩展板与主板连接时所使用的串口设备号，
                  <a
                    target="_blank"
                    href="//ai.iqiar.com/help?form=QiarAI"
                  >点此查看详情</a>
                </template>
                <a-icon v-if="loading"
                        type="loading"
                />
                <a-icon
                    v-else
                  :type="icon[test.ttyCall].type"
                  theme="twoTone"
                  :twoToneColor="icon[test.ttyCall].color"
                />
              </a-popover>
            </a-input>
          </a-auto-complete>
        </a-form-item>
      </div>
      <div class="label">USB音频端口号</div>
      <div class="wrapper">
        <a-form-item>
          <a-auto-complete
            class="talk_input mrm"
            :dataSource="dataSource.usb"
            style="width: 300px"
            @blur="handleCheckForm"            
            placeholder="请选择或输入您的音频USB端口号"
            v-decorator="[
          'tty_usb',
          { rules: [{ required: true, message: '通讯需要，这里不能为空哦！' }] },
          ]"
          >
            <a-input>
              <a-popover slot="suffix" title="帮助提示">
                <template slot="content">
                  此处填写您的扩展板与主板连接的USB端口号，
                  <a
                    target="_blank"
                    href="//ai.iqiar.com/help?form=QiarAI"
                  >点此查看详情</a>
                </template>
                <a-icon v-if="loading"
                    type="loading"
                />
                <a-icon
                    v-else
                  :type="icon[test.ttyUSB].type"
                  theme="twoTone"
                  :twoToneColor="icon[test.ttyUSB].color"
                />
              </a-popover>
            </a-input>
          </a-auto-complete>
        </a-form-item>
      </div>

      <div v-if="typeof sub=='undefined'" class="mts">
        <a-form-item>
          <a-button class="mbm" type="primary" html-type="submit">{{ loading ?"检查中...":"立即修改" }}</a-button>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script>
export default {
  data() {
    const labelCol = {
      xs: { span: 5 },
      sm: { span: 5 }
    };
    const wrapperCol = {
      xs: { span: 24 },
      sm: { span: 12 }
    };
    return {
      formItemLayout: {
        labelCol,
        wrapperCol
      },
      buttonCol: {
        xs: { offset: labelCol.xs.span },
        sm: { offset: labelCol.sm.span }
      },
      dataSource: {
        call: ["/dev/ttyAMA0", "/dev/ttyS0"],
        usb: ["/dev/ttyUSB1", "/dev/ttyUSB2", "/dev/ttyUSB3", "/dev/ttyUSB4"]
      },
      tty: { call: "", usb: "" },
      test: {
        ttyCall: 2,
        ttyUSB: 2
      },
      icon: [
        { type: "check-circle", color: "#06b400" },
        { type: "api", color: "#ff0000" },
        { type: "question-circle", color: "#ccc" }
      ],
      formCheck: 2,
      reloadBtn: "刷新",
      loading:false,
    };
  },
  props: {
    sub: Number
  },
  created() {
    let setting = this.$store.state.common.setting;
    if (typeof setting.tty_call != "undefined")
      this.tty.call = setting.tty_call;
    if (typeof setting.tty_usb != "undefined") this.tty.usb = setting.tty_usb;
    this.formSettings = this.$form.createForm(this, {
      name: "form_settings",
      mapPropsToFields: () => {
        return {
          tty_call: this.$form.createFormField({
            value: this.tty.call
          }),
          tty_usb: this.$form.createFormField({
            value: this.tty.usb
          })
        };
      }
    });
    this.handleListTTY();
  },
  methods: {
    handleListTTY() {
      this.reloadBtn = "正在检查...";
      this.$api.setting
        .getTTYList()
        .then(res => {          
          if (res.serial == null || res.usb == null) {
            this.$message.error("未发现设备，请检查主板接口！");
          }else{
            this.dataSource.call = []
            this.dataSource.usb = []
            res.serial.forEach((v)=>{
              this.dataSource.call.push(v.Name)
            })
            res.usb.forEach((v)=>{
              this.dataSource.usb.push(v.Name)
            })
          }
        })
        .catch(() => {
          this.$message.error("出错了！请检查接口");
        });
      this.reloadBtn = "刷新";
    },
    submitSettings() {
      //e.preventDefault();
      this.formSettings.validateFields((err, values) => {
        if (err) {
          this.formCheck = 1;
        } else {
          this.$api.setting
            .setList([
              {
                key: "tty_call",
                value: values.tty_call
              },
              {
                key: "tty_usb",
                value: values.tty_usb
              }
            ])
            .then(() => {
              this.$message.info("设置已经生效！");
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    handleCheckForm() {
      var values = this.formSettings.getFieldsValue();      
      let data = [];
      if (typeof values.tty_call != "undefined") {
        data.push({
          key: "tty_call",
          value: values.tty_call
        });
      }
      if (typeof values.tty_usb != "undefined") {
        data.push({
          key: "tty_usb",
          value: values.tty_usb
        });
      }
      this.loading = true
      this.$api.test
        .checkSetList(data)
        .then(res => {
          //console.log(res)
          if (res.tty_call) {
            this.test.ttyCall = 0;
          }
          if (res.tty_usb) {
            this.test.ttyUSB = 0;
          }
          if (res.tty_call && res.tty_usb) {
            this.formCheck = 0;
          }
          this.loading = false
        })
        .catch(err => {
          if (err.data.error == 1201) {
            this.test.ttyCall = 1;
          }
          if (err.data.error == 1202) {
            this.test.ttyUSB = 1;
          }
          this.formCheck = 1;
          this.loading = false
          //console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
</style>